<template>
  <uni-popup ref="settingPopup" type="bottom" :safe-area="false" :mask-click="true">
    <view class="setting-container">
      <view class="row" @click="errorCorrection">
        <view class="label">错题上报</view>
      </view>
      <view class="row">
        <view class="label">答对后自动下一题</view>
        <view class="value">
          <switch :checked="questionSetting.trueNext" @change="trueNextChange"/>
        </view>
      </view>
      <view class="font-row">
        <view class="fontA">A</view>
        <slider :value="questionSetting.fontSize" min="0" max="20" @change="fontSizeChange" class="f1" step="2"/>
        <view class="fontB">A</view>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import questionCache from "@/libs/questionCache";

export default {
  name: "SettingDialog",
  props: ['storeId'],
  computed: {
    ...mapGetters(['questionSetting']),
  },
  methods: {
    ...mapActions(['changeQuestionSetting']),
    open() {
      this.$refs.settingPopup.open()
    },
    fontSizeChange(e) {
      console.log(e.detail.value)
      this.changeQuestionSetting({fontSize: e.detail.value})
    },
    trueNextChange(e) {
      console.log(e.detail.value)
      this.changeQuestionSetting({trueNext: e.detail.value})
    },
    errorCorrection() {
      uni.navigateTo({
        url: '/pages/error_report/error_report?id=' + questionCache.getStore(this.storeId).getCurrentItem().id
      })
      this.$refs.settingPopup.close()
    },
  },
}
</script>
<style scoped lang="scss">
.setting-container {
  background-color: #fff;
  padding-top: 40rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  .row {
    height: 100rpx;
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    margin-right: 30rpx;
    border-bottom: 1px solid #eee;

    .label {
      flex: 1;
      font-size: 16px;
    }

    &:last-child {
      border: none;
    }

  }

  .font-row {
    display: flex;
    height: 150rpx;
    align-items: center;
    margin-left: 30rpx;
    margin-right: 30rpx;

    .fontA {
      font-size: 34rpx;
      margin-right: 20rpx;
    }

    .fontB {
      font-size: 44rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
